<script setup>
import { User, Lock } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";

import { ref } from "vue";
import router from "@/router";
import { loginService, updatePwdService } from "@/api/user/user.js";
import { useTokenStore } from "@/store/token.js";
//控制注册与登录表单的显示， 默认显示注册
const isRegister = ref(false);

//调用useTokenStore得到状态
const tokenStore = useTokenStore();

const checked = ref(false);
//用于注册的数据模型
const registerData = ref({
  username: "",
  password: "",
  rePassword: "",
});
const updateData = ref({
  userPass: "",
  userName: "",
  newPass: "",
  rePass: ""
});

//添加分类表单校验
const rules = {
  username: [
    { required: true, message: "请输入账号", trigger: "blur" },
    { min: 3, message: "用户名长度不能小于3", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "密码长度不能小于6", trigger: "blur" },
  ],
};

// 修改密码表单校验
const updateRules = {
  userPass: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "密码长度不能小于6", trigger: "blur" },
  ],
  userName: [
    { required: true, message: "请输入账号", trigger: "blur" },
    { min: 3, message: "用户名长度不能小于3", trigger: "blur" }
  ],
  newPass: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "密码长度不能小于6", trigger: "blur" },
  ],
  rePass: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "密码长度不能小于6", trigger: "blur" },
  ],
}

const formRef = ref(null);
const form = ref(null)
//数据表单的校验
const LoginM = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      login();
    } else {
      ElMessage.error("登录失败，账号密码不符合规范!");
      return false;
    }
  });
};

const login = async () => {
  if (checked.value == false) {
    ElMessageBox.confirm("未同意协议，是否同意", "提示", {
      confirmButtonText: "同意",
      cancelButtonText: "不同意",
      type: "warning",
    })
      .then(() => {
        checked.value = true;
      })
      .catch(() => {
        ElMessage.info("取消登录");
        return;
      });
  } else {
    let result = await loginService(registerData.value);
    //保存token
    tokenStore.setToken(result.data);
    ElMessage.success("登录成功!");
    router.push("/course/CourseList");
  }
};

const updatePwd = () => {
  form.value.validate(async (valid) => {
    if (valid) {
      if (updateData.value.newPass != updateData.value.rePass) {
        ElMessage.error("两次输入密码不一致!");
        return;
      }
      const params = new URLSearchParams();
      params.append("userPass", updateData.value.userPass);
      params.append("userName", updateData.value.userName);
      params.append("newPass", updateData.value.newPass);
      let result = await updatePwdService(params);
      if (result.code == 200) {
        ElMessage.success("修改成功!");
        window.location.reload();
      } else {
        ElMessage.error(result.msg);
      }

    }
  });
};

</script>

<template>
  <div class="login" style="background-color: white !important; ">
    <div class="logo">
      <img src="../assets/web/login_1.png" />
    </div>
    <div class="login_info">
      <div class="login_img">
        <img src="../assets/web/rw.png" alt="" width="800" />
      </div>
      <div class="login_form">
        <div class="login_title">
          <img src="../assets/web/login_t.png" />
        </div>
        <div>
          <el-form ref="formRef" size="large" :rules="rules" :model="registerData" autocomplete="off">

            <el-form-item prop="username">
              <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码"
                v-model="registerData.password"></el-input>
            </el-form-item>

            <el-form-item  prop="rePassword">
                <el-checkbox v-model="checked"><span>登录既阅读并同意</span></el-checkbox>
                <el-link type="primary" :underline="false">《隐私服务协议》</el-link>
            </el-form-item>

            <el-form-item>
              <el-button class="btn" type="primary btn" auto-insert-space @click="LoginM">登录</el-button>
            </el-form-item>

          </el-form>
        </div>

      </div>
    </div>
  </div>
</template>
<style scoped>
body {
  background-color: white !important; /* 覆盖全局样式 */
}
.login{
  overflow: hidden;
}

.logo {
  width: 642px;
  height: 58px;
  margin: 31px auto 0;
}

.login_info {
  width: 1400px;
  margin: 0 auto;
  display: flex;
}

.login_form {
  width: 377px;
  height: 556px;
  border-radius: 10px;
  background: rgba(250, 250, 250, 0.4);
  box-shadow: 0px 0px 20px 0px rgba(0, 5, 193, 0.1);
  text-align: center;
  margin-top: 181px;
  margin-left: 70px;
  padding: 35px;
}

.login_title {
  margin-top: 56px;
  margin-bottom: 25px;
}

/* .login_userinfo {
  width: 312px;
  height: 58px;
  border: 1px solid #DCDDDD;
  background-color: #f1f3f8;
  border-radius: 29px;
  margin-top: 31px;
  padding-left: 30px;
  outline: none;

} */


/* 
.login_userinfo::placeholder {
  color: #DCDDDD;
} */

/* .xieyi {
  margin-top: 53px;
} */

/* .xieyi input {
  width: 15px;
  height: 15px;
  vertical-align: middle;

} */



/* .xieyi span {
  color: #808080;
  vertical-align: middle;
  margin-left: 11px;
}

.xieyi span a {
  color: #409EFF;
  text-decoration: none;
} */

.btn {
  width: 312px;
  height: 58px;
  line-height: 58px;
  color: #fff;
  background: linear-gradient(0deg, #FF3C61 0%, #EE032A 100%);
  border-radius: 29px;
  margin: 0px auto;
  text-align: center;
  cursor: pointer;
  font-size: 20px;
  letter-spacing: 10px;
  border: 0;
}
</style>